export const addCourseCard = (editor) => {
  const { Components } = editor;

  // 此组件为案例卡片组件，双击图片可以更改图片，点击text可以修改说明文字
  // 需要横向排列可以设置样式的float为left或right
  Components.addType("CourseCard", {
    model: {
      defaults: {
        name: "CourseCard",
        droppable: false,
        attributes: { class: "course-card" },
        components: [
          {
            type: "div",
            attributes: { class: "course-card-wrapper" },
            components: [
              {
                type: "image",
                attributes: {
                  src: "https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/64200cfe52f6862c161ffd5c17463692.jpg",
                },
              },
              {
                type: "div",
                attributes: { class: "course-card-description" },
                components: [
                  {
                    type: "text",
                    content:
                      "三维建模课程",
                    attributes: { class: "title" },
                  },
                  {
                    type: "text",
                    content: "时间：2023/5/24 20:00 - 21:00 丨 10课时",
                    attributes: { class: "time" },
                  },
                  {
                    type: "text",
                    content: "老师：张晓霞",
                    attributes: { class: "role" },
                  },
                  {
                    type: "div",

                    attributes: { class: "info" },
                    components: [
                      {
                        type: "text",
                        content: "免费",
                        attributes: { class: "price" },
                      },
                      {
                        type: "text",
                        content: "225人参加",
                        attributes: { class: "num" },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
        styles: `
          .course-card-wrapper {
            border: 1px solid rgb(233, 233, 233);
            width: 318px;
            background-color: #ffffff;
          }
          .course-card-wrapper img {
            width: 100%;
            // height: 216px;
          }
          .course-card-description {
            text-align: left;
            width: 100%;
            padding: 0 10px;
            padding-bottom: 0px;
          }

          .title {
            font-weight: 500;
            font-size: 18px;
          }
          .time,.role {
            width: 100%;
            text-align: center;
            color: #aaaaaa;
            font-size: 14px;
          }
          .info {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 10px 0;
          }
          .price {
            color: #70b603;
            font-size: 24px;
          }
          .num {
            color: #aaaaaa;
            font-size: 14px;
          }
        `,
      },
    },
  });
};
